import React, { Component, useEffect, useState, useRef } from 'react';
import { Row, Col, Table } from 'antd';
import { connect } from 'dva';
import * as echarts from 'echarts';

const Service = ({ dispatch, type }) => {
  const kpiRef = useRef();
  const buildRef = useRef();
  const [dataSource, setdataSource]: any = useState([]);

  const initPie = data => {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(kpiRef.current);

    // 指定图表的配置项和数据
    var option = {
      title: {
        text: '项目类型',
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)',
      },
      legend: {
        bottom: 'bottom',
        data: ['未评审', '已评审'],
      },
      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: '55%',
          center: ['50%', '50%'],
          data: [
            { value: data.noExamineCount, name: '未评审' },
            { value: data.examineCount, name: '已评审' },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
      ],
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  };
  const initMap = data => {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(buildRef.current);

    // 指定图表的配置项和数据
    var option = {
      // title: { text: '项目性质' },
      tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'shadow' },
      },

      xAxis: {
        type: 'value',
      },
      yAxis: { type: 'category', data: ['审减金额', '审加金额'] },
      series: [
        {
          name: '已完成',
          type: 'bar',
          stack: 'total',
          label: {
            show: true,
          },
          emphasis: {
            focus: 'series',
          },
          data: [data.examineReduceAmount, data.examineAddAmount],
        },
      ],
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  };

  useEffect(() => {
    if (type == 2) {
      initData();
    }
  }, [type]);
  const initData = () => {
    dispatch({
      type: '$request/post',
      payload: {
        url: '/api/analysis/v1/examineAnalysis/service',
      },
    }).then(res => {
      console.log('Build: ', res);
      initPie(res);
      initMap(res);
      setdataSource([
        {
          serviceType: '公众服务',
          totalCount: res.innerWorkItem.totalCount,
          examineCount: res.innerWorkItem.examineCount,
          examineRate: res.innerWorkItem.examineRate + '%',
          examineAmount: res.innerWorkItem.examineAmount,
          examineAddAmount: res.innerWorkItem.examineAddAmount,
        },
        {
          serviceType: '内部办公',
          totalCount: res.publicServiceItem.totalCount,
          examineCount: res.publicServiceItem.examineCount,
          examineRate: res.publicServiceItem.examineRate + '%',
          examineAmount: res.publicServiceItem.examineAmount,
          examineAddAmount: res.publicServiceItem.examineAddAmount,
        },
        {
          serviceType: '合计',
          totalCount:
            res.innerWorkItem.totalCount + res.publicServiceItem.totalCount,
          examineCount:
            res.innerWorkItem.examineCount + res.publicServiceItem.examineCount,
          examineRate:
            (res.innerWorkItem.examineCount +
              res.publicServiceItem.examineCount) /
              (res.innerWorkItem.totalCount +
                res.publicServiceItem.totalCount) +
            '%',
          examineAmount:
            res.innerWorkItem.examineAmount +
            res.publicServiceItem.examineAmount,
          examineAddAmount:
            res.innerWorkItem.examineAddAmount +
            res.publicServiceItem.examineAddAmount,
        },
      ]);
    });
  };
  const columns = [
    { title: '项目类型', dataIndex: 'serviceType' },
    { title: '项目数', dataIndex: 'totalCount' },
    { title: '评审项目数', dataIndex: 'examineCount' },
    { title: '评审率', dataIndex: 'examineRate' },
    { title: '评审金额（万元）', dataIndex: 'examineAmount' },
    { title: '审减金额（万元）', dataIndex: 'examineReduceAmount' },
    { title: '审加金额（万元）', dataIndex: 'examineAddAmount' },
  ];

  return (
    <Row>
      <Row style={{ width: '100%' }}>
        <Col span={12}>
          <div ref={buildRef} style={{ height: 300 }}></div>
        </Col>
        <Col span={12}>
          <div ref={kpiRef} style={{ height: 300 }}></div>
        </Col>
      </Row>
      <Row style={{ width: '100%', marginTop: 60 }}>
        <Table
          columns={columns}
          dataSource={dataSource}
          pagination={false}
          bordered
          style={{ width: '100%' }}
        />
      </Row>
    </Row>
  );
};
export default connect(state => state.base)(Service);
